<!--
 * @Author: sundl
 * @Date: 2021-04-12 15:40:10
 * @project: 天津YQ平台
-->
<template>
  <dg-row>
    <ModuleCard>
      <template v-slot:header>关联信息</template>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="item in relateInfoConfig.tabItems"
          :key="item.id"
        ></el-tab-pane>
      </el-tabs>
      <div>
        <common-table ref="table" :columns="relateInfoConfig.columns">
          <template v-slot:title="{ row }">
            <dg-button type="text" @click="routeToClueDetail(row, row.targetFlowId)"> {{ row.title }}</dg-button>
          </template>
        </common-table>
      </div>
    </ModuleCard>
  </dg-row>
</template>

<script>
import { relateInfoConfig } from './config';
import ModuleCard from '@/components/layout/module-card';
import { routeToClueDetail } from '@/utils/data-utils';

export default {
  components: {
    ModuleCard
  },
  data() {
    return {
      relateInfoConfig,
      activeName: 'all',
      routeToClueDetail
    };
  },
  computed: {
    flowId() {
      return this.$route.params.id || '';
    }
  },
  watch: {
    activeName(newVal) {
      const tab = relateInfoConfig.tabItems.find(item => item.value === newVal);
      this.fetchList(tab);
    }
  },
  methods: {
    onRefresh() {
      if (this.activeName !== 'all') {
        this.activeName = 'all';
        return;
      }
      this.fetchList();
    },
    fetchList(tab = relateInfoConfig.tabItems[0]) {
      let searchCondition = [{ name: 'flowId', op: '=', value: this.flowId, type: '', format: '' }];
      if (tab.tabType || tab.tabType === 0) {
        searchCondition.push({ name: 'tabType', op: '=', value: tab.tabType, type: '', format: '' });
      }

      if (tab.func) {
        this.$refs.table.search(
          tab.func,
          {
            page: 0,
            size: 5,
            sort: JSON.stringify(Object.assign(...relateInfoConfig.reqCondition.sorts)),
            searchCondition: JSON.stringify(searchCondition)
          },
          { currentPage: 0, pageSize: 5 }
        );
        return;
      }
      // TODO 其他班暂时没提供接口，重置数据为空
      this.$refs.table.tableData = [];
      this.$refs.table.paginationTotal = 0;
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 请求全部
      this.fetchList();
    });
  }
};
</script>

<style></style>
